<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--<form>-->
<!--    <input name="username">-->
<!--    <input name="password">-->
<!--    <button type="submit">登录</button>-->
<!--</form>-->

<div class="modal-body" style="width: 500px;">
    <form class="clearfix">
        <div class="form-group row">
            <label for="count" class="col-sm-2 col-form-label" style="text-align: right">帐号</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="count" placeholder="请输入账户" name="userIdentity">
            </div>
        </div>
        <div class="form-group row">
            <label for="userPassword" class="col-sm-2 col-form-label" style="text-align: right">密码</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="userPassword" placeholder="请输入密码" name="password">
            </div>
        </div>
        <div class="row">
            <label for="code_input" class="col-sm-2 col-form-label" style="text-align: right">验证码</label>
            <div class="col-sm-10">
                <input type="text" class="form-control d-inline-block" id="code_input" placeholder="请输入验证码"
                       style="width: 50%">
                <div id="v_container" class="d-inline-block ml-3"></div>
            </div>
        </div>
        <button type="submit" class="btn btn-primary float-right" id="loadBtn" style="width: 100px">登录</button>
    </form>
</div>
<script src="js/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="js/index.js"></script>
<script src="js/gVerify.js"></script>
<script>
    var verifyCode = new GVerify("v_container");

    $("#loadBtn").on("click", function () {
        var res = verifyCode.validate(document.getElementById("code_input").value);
        if (res) {
            console.log("登录");
            let userIdentity = $("input[name=userIdentity]").val();
            let password = $("input[name=password]").val();
            console.log(userIdentity + "\t" + password);
            $.ajax({
                url: "/userLogin",
                dataType: "json",
                type: "post",
                data: "userIdentity="+userIdentity+"&password="+password,
                success: function(responseResult){
                    if(responseResult.code==1){
                        window.location.href="/index";
                    }else{
                        alert(responseResult.msg);
                    }
                },
                error: function(){
                    console.log("登录请求失败");
                    alert("登录请求失败");
                }
            })
        } else {
            alert("验证码错误");
        }
        return false;
    });
</script>
</body>
</html>